<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beebud</title>
  <script src="./js/ofs.js"></script>
  <link rel="stylesheet" href="./css/beebud.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="shortcut icon" href="./logo.png" type="image/x-icon">
  <script src="./js/vue.min.js"></script>

</head>

<body>
  <div id="app">
    <header>
      <div class="header-wrapper">
        <div class="logo"><a href="./index.html"><img src="./img/logo.png" alt=""></a>
        </div>
        <div class="search-wrapper">
          <!-- <input type="text" placeholder="登录搜索更多内容">
          <?xml version="1.0" encoding="UTF-8"?><svg width="14" height="14" viewBox="0 0 48 48" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z"
              fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round" />
            <path d="M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431"
              stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M33.2216 33.2217L41.7069 41.707" stroke="#000" stroke-width="4" stroke-linecap="round"
              stroke-linejoin="round" />
          </svg> -->
        </div>

        <div class="nav-wrapper">
          <span><a href="./about.html">关于我们</a> </span>
          <span><a href="./goodsList.html">商品列表</a> </span>
          <span><a href="./ruzhu.html">商家入驻</a> </span>
          <span><a href="./concatUs.html">联系我们</a> </span>
          <span><a href="./help.html" class="help-a">服务与帮助</a> </span>
        </div>
        <div class="login-register">
          <span><a href="./register.html">注册</a></span>
          <button><a href="./login.html">登录</a></button>
        </div>
      </div>
    </header>
    <!-- <section class="banner">
      <div class="banner-wrapper">
        <img src="./img/banner.png" alt="">
        <div class="banner-text">
          <div class="text-1">每个人都有自己的能量</div>
          <div class="text-2">即使再小的需求和兴趣，你都能得到即可满足</div>
        </div>
      </div>
    </section> -->
    <main>
      <div class="main-left">
        <!-- 热门推荐 -->
        <!-- <div class="hot-recommend">
          热门推荐
        </div> -->
        <!-- 点击发布 -->
        <p style="margin-bottom: 20px;">产品分类</p>
        <ul>
          <li v-for="item in type" :style="{color: item.name===typeName ? 'rgb(248, 147, 31)' :'#333'}" :key="item.id"
            @click="clickTypeHandle(item)">{{item.name}}</li>
        </ul>
        <!-- <div class="click-release">
        </div> -->
      </div>
      <div class="main-right">
        <div class="filter-btns">
          <!-- <span v-for="(item, i) in labels" :key="i" @click="clickLabelHandle(i)">{{item}}</span> -->
          <h2>{{typeName}} </h2>
        </div>
        <div class="container">
          <ul class="beebud-list">
            <li v-for="item in list">
              <a :href="'./goodsDetail.html?id='+item.id" target="_blank" rel="noopener noreferrer">
                <img :src="item.imageList[0]" alt="">
                <div class="beebud-info">
                  <div class="title">{{item.title}}</div>
                  <div class="price">￥{{item.price/100}}</div>
                  <a :href="`store.html?id=${item.publisherId}`">
                    <div class="user-info">
                      <img :src="item.avatar" alt="" class="avatar">
                      <div class="name">{{item.nickname}}</div>
                    </div>
                  </a>

                </div>
              </a>
            </li>
            <div class="fb"></div>
            <div class="fb"></div>
            <div class="fb"></div>
          </ul>
        </div>
      </div>
    </main>
    <footer>
      <div class="footer-wrapper">
        <div>
          <div>
            <span>上海灼蕾网络科技有限公司</span>
            <div style="margin-left: 20px;"><a href="https://beian.miit.gov.cn" target="_blank"
                rel="noopener noreferrer">沪ICP备2024048955号</a> </div>
          </div>
          <div>
            <span>地址：上海市长宁区凯旋路1205号1号楼 三 楼 3C 室</span>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <script src="./js/common.js"></script>
  <!-- <script src="./js/index.js"></script> -->
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          showLogin: false,
          showRegister: false,
          list: [],
          labels: ["宠物", "运动", "帮手", "城游"],
          type: [],
          typeName: '全部'
        }
      },
      mounted() {
        this.getList(null)
        this.getType();
      },
      methods: {
        async getList(cateId
        ) {
          const params = cateId
            ? {
              cateId
            } : {}
          const res = await request('/web/goodsList', 'post', params);
          this.list = res.data
        },
        async getType(labelId) {
          const params = labelId ? { labelId } : {}
          const res = await request('/web/cateList ', 'post', params);
          this.type = [{ name: '全部', id: undefined }, ...res.data]
          this.typeName = this.type[0].name
        },
        clickTypeHandle(i) {
          this.typeName = i.name;
          this.getList(i.id)
        }
      }
    })
  </script>
</body>

</html>